<template>
  <div class="container">
    <nav>这是头部</nav>
    <aside><aside-menu :lists="lists" v-on:toPage="linkTo" v-on:nowTitle="getTitle"></aside-menu></aside>
    <section>
      <el-breadcrumb separator-class="el-icon-arrow-right" >
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="link in links" :to="link.url" :key="link.url">{{link.title}}</el-breadcrumb-item>
      </el-breadcrumb>
      <router-view class="mainBox"></router-view>
      <footer>这是底部栏</footer>
    </section>
  </div>
</template>

<script>

import asideMenu from '@/components/component/asideMenu'
export default {
  name: 'index',
  data () {
    return {
      lists: [
        {
          title: '店铺管理',
          id: '1-1',
          url: '/store',
          childrens: [
            {link: '/store/storeList', index1: '1', storeName: '店铺列表'},
            {link: '/store/staff', index1: '2', storeName: '员工管理'},
            {link: '/store/member', index1: '3', storeName: '会员管理'},
            {link: '/store/atten', index1: '4', storeName: '考勤管理'},
            {link: '/store/author', index1: '5', storeName: '权限管理'}
          ]
        },
        {
          title: '商品管理',
          id: '1-2',
          url: '/goods',
          childrens: [
            {link: '/goods/bigClass', index1: '6', storeName: '大类配置列表'},
            {link: '/goods/sellList', index1: '7', storeName: '可售系列表'},
            {link: '/goods/stockList', index1: '8', storeName: '商品库存表'},
            {link: '/goods/priceList', index1: '9', storeName: '价格管理'},
            {link: '/goods/stockYj', index1: '10', storeName: '库存预警管理'}
          ]
        }

      ],
      links: []
    }
  },
  components: {
    asideMenu
  },
  methods: {
    linkTo (url) {
      console.log(url.replace(/([A-Z])/g, '-$1').toLowerCase())
      this.makeBreadcrumb()
    },
    getTitle (url) {
      console.log(url)
      this.makeBreadcrumb()
      console.log(this.$route.path)
    },
    makeBreadcrumb () {
      let url = this.$route.path
      if (url !== '/') {
        let arr = []
        console.log(url)
        let obj = this.lists.filter((v, i) => {
          return v.url.replace('/', '') === url.split('/')[1]
        })[0]
        arr.push({
          url: obj.url,
          title: obj.title
        })
        if (url.split('/').length === 2) {
        } else {
          let child = obj.childrens.filter((v, i) => {
            return v.link === url
          })[0]
          arr.push({
            url: child.link,
            title: child.storeName
          })
        }
        this.links = arr
      } else {
        this.links = []
      }
    }
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        console.log(val)
        this.makeBreadcrumb()
      },
      // 深度观察监听
      deep: true
    }
  }
}
</script>

<style scoped>
  .container{
    width: 100%;
    height: 100%;
    padding-top: 60px;
    box-sizing: border-box;
    position: relative;
  }
  nav{
    height: 60px;
    background-color: #409EFF;
    line-height: 60px;
    color:#fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
  }
  aside{
    width: 260px;
    height: 100%;
    float: left;
    background-color: #909399;
  }
  section{
    width: calc(100% - 260px);
    height: 100%;
    float: left;
    padding-bottom: 60px;
    box-sizing: border-box;
    position: relative;
  }
  .mainBox{
    height: 100%;
    width: 100%;
    overflow: auto;
  }
  footer{
    height: 60px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    line-height: 60px;
    background-color: silver;
  }
  .el-breadcrumb{
    height: 40px;
    padding: 10px 0px 0px 20px;
  }
</style>
